<style scoped lang="scss">
      .lists {
        .list {
          cursor: pointer;
          border-radius: 2px;
          overflow: hidden;
          margin-bottom: 15px;
          .header {
            font-size: 13px;
            height: 35px;
            width: 100%;
            position: relative;
            line-height: 35px;
            background-color: #efefef;
            font-weight: 600;
            .task {
              float: left;
              width: 15px;
              height: 15px;
              margin: 10px 8px;
              background: url("../../assets/img/task01.png") no-repeat center
                center;
              background-size: 15px;
            }
            .name {
              float: left;
              height: 100%;
              margin-right: 35%;
              width: 130px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              color: #212122;
            }
            .weight {
              float: left;
              margin-right: 2px;
            }
            .red {
              float: left;
              color: red;
            }
            .serial {
              display: inline-block;
              position: absolute;
              top: 0;
              right: 0;
              height: 35px;
              width: 35px;
              background: url("../../assets/img/sj1.png") no-repeat;
              background-size: 35px;
            }
            .y {
              min-width: 15px;
              min-height: 15px;
              line-height: 12px;
              text-align: center;
              color: #fff;
              border-radius: 50%;
              border: 1px solid #fff;
              position: absolute;
              top: 2px;
              right: 2px;
              z-index: 2;
              font-size: 12px;
            }
          }
          .body {
            padding: 0 10px;
            float: left;
            box-sizing: border-box;
            border: 1px solid #e2e2e2;
            background-color: #fff;
            border-radius: 0px 0px 4px 4px;
            position: relative;
            .leftActive{
              width: 3px;
              height: 60px;
              background-color: #5797f0;
              position: absolute;
              left: 0;
              top: 20px;
            }
            .p {
              width: 100%;
              height: 32px;
              line-height: 32px;
              float: left;
              .left {
                float: left;
                width: 68px;
                margin: 0;
                color: #666665;
              }
              .right {
                float: left;
                width: 300px;
                height: 32px;
                text-align: right;
                margin: 0;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                color: #323233;
              }
              .left1{
                width: 138px;
              }
              .right1{
                width: 230px;
              }
              .red {
                color: red;
              }
            }
            .p_last {
              float: left;
              width: 100%;
              height: 32px;
              line-height: 32px;
              text-align: center;
              color: #b9b9b9;
              .date {
                margin: 0 2px;
              }
            }
          }
        }
        .active {
          .header {
            background: #e2ecfa;
            .task {
              float: left;
              width: 15px;
              height: 15px;
              margin: 10px 8px;
              background: url("../../assets/img/task.png") no-repeat center
                center;
              background-size: 15px;
            }
            .serial {
              display: inline-block;
              position: absolute;
              top: 0;
              right: 0;
              height: 35px;
              width: 35px;
              background: url("../../assets/img/sj.png") no-repeat;
              background-size: 35px;
            }
          }
          .body {
            background: #f3f7fb;
          }

          // &::before {
          //   content: "";
          //   position: absolute;
          //   top: 20%;
          //   left: 0px;
          //   display: inline-block;
          //   width: 3px;
          //   height: 85px;
          //   z-index: 10;
          //   border-radius: 0px 4px 4px 0px;
          //   // border-radius: 20px;
          //   background-color: #5797f0;
          // }
        }
        .activeBefore{
          .header{
            background-color: #E2F3D8;
            .task{
              background: url("../../assets/img/task1.png") no-repeat center
              center;
              background-size: 15px;
            }
            .serial{
              height: 35px;
              width: 30px;
              background: url("../../assets/img/sj2.png") no-repeat;
              background-size: 30px;
            }
          }
          .body{
            background-color: #F7FBF6;
            .leftActive{
              background-color: #55B802;
            }
          }

          // &::before {
          //   content: "";
          //   position: absolute;
          //   top: 50px;
          //   left: 0px;
          //   display: inline-block;
          //   width: 3px;
          //   height: 85px;
          //   z-index: 10;
          //   border-radius: 0px 4px 4px 0px;
          //   // border-radius: 20px;
          //   background-color: #55B802;
          // }
        }
        .add{
          text-align: center;
          margin-bottom: 20px;
          button{
            width: 100%;
            height: 40px;
          }
        }
      }
</style>
<template>
  <div>
    <ul v-show="importantActive" class="lists">
      <draggable v-model="config" animation="1000" :disabled="false" @start="onStart" @end="onEnd">
        <transition-group>
          <li v-for="(item,index) in config" :key="item.detailIdentify" class="list" :class="[ index === number ? 'active' : '', !importantActive && number === index ? 'activeBefore' : '']" @click="mainClick(item,index)">
            <div class="header">
              <div class="task" />
              <i class="name">{{ item.name }}</i>
              <!-- <i class="weight">权重:</i> -->
              <!-- <i class="red">{{ item.weight }}%</i> -->
              <div class="serial" />
              <i class="y">{{ index + 1 }}</i>
            </div>
            <div class="body">
              <!-- <div v-show="number === index" class="leftActive" /> -->
              <!-- <p class="p">
              <span class="left">任务内容</span>
              <span
                class="right"
              >{{ item.content }}</span>
            </p> -->
              <p class="p">
                <span class="left">完成时间</span>
                <span class="right red">{{ item.finishTime }}</span>
              </p>
              <!-- <p class="p">
              <span class="left">任务来源</span>
              <span class="right">{{ item.originalSelect }}</span>
            </p> -->
              <!-- <p v-show="item.empName && item.createTime" class="p_last">
                {{ item.empName }}
                <i class="date">{{ item.createTime }}</i>
                提交
              </p> -->
            </div>
          </li>
        </transition-group>
      </draggable>
      <li class="add">
        <el-button icon="el-icon-circle-plus-outline" @click="addMain()">新增重要任务</el-button>
      </li>
    </ul>
    <ul v-show="!importantActive" class="lists">
      <draggable v-model="cruxConfig" animation="1000" :disabled="false" @start="start" @end="end">
        <transition-group>
          <li v-for="(item,index) in cruxConfig" :key="item.detailIdentify" class="list" :class="[ index === number ? 'active' : '', !importantActive && number === index ? 'activeBefore' : '']" @click="mainClick(item,index)">
            <div class="header">
              <div class="task" />
              <i class="name">{{ item.name }}</i>
              <i class="weight">权重:</i>
              <i class="red">{{ item.weight }}%</i>
              <div class="serial" />
              <i class="y">{{ index + 1 }}</i>
            </div>
            <div class="body">
              <div v-show="number === index" class="leftActive" />
              <p class="p">
                <span class="left left1">指标描述及计算公式</span>
                <span
                  class="right right1"
                >{{ item.content }}</span>
              </p>
              <p class="p">
                <span class="left">2021年目标</span>
                <span class="right red">{{ item.target }}</span>
              </p>
              <p class="p">
                <span class="left">指标来源</span>
                <span class="right">{{ item.originalSelect }}</span>
              </p>
              <p v-show="item.empName && item.createTime" class="p_last">
                {{ item.empName }}
                <i class="date">{{ item.createTime }}</i>
                提交
              </p>
            </div>
          </li>
        </transition-group>
      </draggable>
      <li class="add">
        <el-button icon="el-icon-circle-plus-outline" @click="addMain()">新增关键指标</el-button>
      </li>
    </ul>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable
  },
  props: {
    importantActive: {
      type: Boolean,
      default() {
        return true
      }
    },
    missionList: {
      type: Array,
      default() {
        return []
      }
    },
    indexList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      number: ''
    }
  },
  computed: {
    config: {
      get() {
        return this.missionList
      },
      set(val) {
        this.$emit('update:missionList', val)
      }
    },
    cruxConfig: {
      get() {
        return this.indexList
      },
      set(val) {
        this.$emit('update:indexList', val)
      }
    }
  },
  watch: {
    missionList(arr) {
      this.importantChange(0)
      this.number = 0
    },
    importantActive(val) {
      if (val) {
        this.indexList[this.number] = this.getOldData()
        this.$emit('assideMissionList', this.missionList)
        this.$emit('childObj', this.missionList[0])
      } else {
        this.missionList[this.number] = this.getOldData()
        this.$emit('assideIndexList', this.indexList)
        this.$emit('childObj', this.indexList[0])
      }
      this.number = 0
    },
    indexList(arr) {
      this.importantChange(0)
      this.number = 0
    },
    number(val) {
      this.importantChange(val)
    }
  },
  mounted() {
    // this.datalist = JSON.parse(JSON.stringify(this.missionList))
  },
  methods: {
    onStart(inde) {
      this.saveCurrentData(this.number)
      this.$emit('assideMissionList', this.missionList)
    },
    start() {
      this.saveCurrentData(this.number)
      this.$emit('assideIndexList', this.indexList)
    },
    // 拖拽结束事件
    end(inde) {
      // this.$emit('dragGuanjian', inde.oldDraggableIndex, inde.newDraggableIndex)
      console.log('END', this.indexList)
    },
    // 拖拽结束事件
    onEnd(inde) {
      console.log('END', this.missionList, this.number)
    },
    add(inde) {
      console.log('add', inde, 'add')
    },
    importantChange(val) {
      if (this.importantActive) {
        this.$emit('assideMissionList', this.missionList)
        this.$emit('childObj', this.missionList[val])
      } else {
        this.$emit('assideIndexList', this.indexList)
        this.$emit('childObj', this.indexList[val])
      }
    },
    // 滚动条
    scrollTop() {
      // if (this.number >= 2) {
      this.$parent.scrollTopTimer()
      console.log(this.$parent, 'parent')
      // }
    },
    // sort 排序
    up() {
      this.saveCurrentData(this.number)
      console.log(this.number)
      if (!this.importantActive) {
        if (this.number === this.indexList.length - 1) {
          return
        }
        console.log('a')
        if (this.indexList.length === 1) {
          return
        }
        const curent = this.indexList[this.number]
        const next = this.indexList[this.number - 1]
        const currentdetail = curent.detailIdentify
        const nextdetail = next.detailIdentify
        curent.detailIdentify = nextdetail
        next.detailIdentify = currentdetail
        this.indexList[this.number] = next
        this.indexList[this.number - 1] = curent
        this.number -= 1
      } else {
        if (this.number === 0) {
          return
        }
        console.log('a')
        if (this.missionList.length === 1) {
          return
        }
        const curent = this.missionList[this.number]
        const next = this.missionList[this.number - 1]
        const currentdetail = curent.detailIdentify
        const nextdetail = next.detailIdentify
        curent.detailIdentify = nextdetail
        next.detailIdentify = currentdetail
        this.missionList[this.number] = next
        this.missionList[this.number - 1] = curent
        this.number -= 1
      }
    },
    down() {
      this.saveCurrentData(this.number)
      console.log(this.number)
      if (!this.importantActive) {
        if (this.number === this.indexList.length - 1) {
          return
        }
        console.log('a')
        if (this.indexList.length === 1) {
          return
        }
        const curent = this.indexList[this.number]
        const next = this.indexList[this.number + 1]
        const currentdetail = curent.detailIdentify
        const nextdetail = next.detailIdentify
        curent.detailIdentify = nextdetail
        next.detailIdentify = currentdetail
        this.indexList[this.number] = next
        this.indexList[this.number + 1] = curent
        this.number += 1
      } else {
        if (this.number === this.missionList.length - 1) {
          return
        }
        console.log('a')
        if (this.missionList.length === 1) {
          return
        }
        const curent = this.missionList[this.number]
        const next = this.missionList[this.number + 1]
        const currentdetail = curent.detailIdentify
        const nextdetail = next.detailIdentify
        curent.detailIdentify = nextdetail
        next.detailIdentify = currentdetail
        this.missionList[this.number] = next
        this.missionList[this.number + 1] = curent
        this.number += 1
      }
    },
    // 住任务删除
    delete() {
      if (!this.importantActive) {
        // const tempNumber = this.number
        this.indexList.splice(this.number, 1)
        if (this.indexList.length === 0) {
          const obj = this.$parent.getEmptyIndexObj()
          this.indexList.push(obj)
          this.$emit('assideIndexList', this.indexList)
        } else {
          this.indexList.map((item, index) => {
            if (index >= this.number) {
              item.detailIdentify = item.detailIdentify * 1 - 1 + ''
            }
          })
          this.number -= 1
        }
      } else {
        // const tempNumber = this.number
        this.missionList.splice(this.number, 1)
        if (this.missionList.length === 0) {
          const obj = this.$parent.getEmptyIndexObj()
          this.missionList.push(obj)
          this.$emit('assideMissionList', this.missionList)
        } else {
          this.missionList.map((item, index) => {
            if (index >= this.number) {
              item.detailIdentify = item.detailIdentify * 1 - 1 + ''
            }
          })
          this.number -= 1
        }
      }
    },
    mainClick(item, index) {
      this.saveCurrentData(this.number)
      // 获取当前右侧的数据
      this.number = index
      this.scrollTop()
    },
    // 获得重要任务所有数据
    getMissionList() {
      this.saveCurrentData(this.number)
      return this.missionList
    },
    // 获得关键指标所有数据
    getIndexList() {
      this.saveCurrentData(this.number)
      return this.indexList
    },

    saveCurrentData(index) {
      if (!this.importantActive) {
        this.indexList[index] = this.getOldData()
      } else {
        this.missionList[index] = this.getOldData()
      }
    },

    getOldData() {
      return this.$parent.getPrintData()
    },

    addMain() {
      // this.$parent.$refs.left
      this.saveCurrentData(this.number)
      let obj = {}
      if (this.importantActive) {
        obj = this.$parent.getEmptyMissionObj()
        this.missionList.push(obj)
        this.$emit('assideMissionList', this.missionList)
      } else {
        obj = this.$parent.getEmptyIndexObj()
        this.indexList.push(obj)
        this.$emit('assideIndexList', this.indexList)
      }
      this.$emit('childObj', obj)

      this.$nextTick(() => {
        if (!this.importantActive) {
          this.number = this.indexList.length - 1
        } else {
          this.number = this.missionList.length - 1
        }
        this.scrollTop()
      })
    }
  }
}

</script>
